<template>
  <div >
    <p class="real-time-num gsapNum" style="text-align: center">{{ number }}</p>
  </div>
</template>

<script>
import gsap from 'gsap';
export default {
  data() {
    return {
      currentNumber: 0, // 当前显示的数字
    };
  },
  props:{
    number: {
      type: [Number,String],
      default:''
    },
  },
  computed: {
    // 格式化数字，添加千位分隔符并保留两位小数
    /*formattedNumber() {
      return this.currentNumber.toLocaleString(undefined, {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
      });
    },*/
  },
  mounted() {
    this.startCounting();
  },
  methods: {
    startCounting() {
      gsap.to(this, {
        duration: 2, // 动画持续时间（秒）
        currentNumber: this.number, // 目标值
        ease: 'power1.out', // 缓动效果
        onComplete: () => {
          console.log('动画完成！');
        },
      });
    },
  },
};
</script>

<style scoped>
.real-time-num {
  width: auto !important;
  font-size: 30px;
  font-family: DIN-Bold, DIN;
  font-weight: bold;
  color: #31FFFD;
}
</style>
